import React, { Component } from 'react'
import store, {actionCreator} from './store/index.js'
import {NavLink} from 'react-router-dom'

export default class Redux2 extends Component {
  constructor() {
    super();
    this.state = {
      age: 1,
      hobby: []
    }
  }
  componentDidMount() {
    this.setState(store.getState());
    this.un = store.subscribe(()=> {
      this.setState(store.getState());
    })
  }
  changeAge() {
    // store.dispatch({type: 'ageAddd'}); // 老的方式
    store.dispatch(actionCreator.ageAdd())
    console.log(store.getState());
  }
  componentWillUnmount () {
    // 取消订阅
    this.un();
  }
  render() {
    return (
      <div>
        <p>Redux的使用---2</p>
        <p>年龄：{this.state.age}</p>
        <button onClick={()=>this.changeAge()}>修改年龄</button>
        <p>爱好：</p>
        {
          this.state.hobby.map(item => {
            return (
              <button key={item}>{item}</button>
            )
          })
        }
        <br />
        <NavLink to="/redux">页面1</NavLink>
      </div>
    )
  }
}
